<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
import { useRoute } from "vue-router"; // 路由信息
import FilterCinemas from "@/pages/filmcinemas/components/filterCinemas.vue"; // 筛选影院组件
import getInterface from "@/api";
import Loading2 from "@/components/Loading2.vue";
import CinemaList from "@/components/CinemaList.vue";

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
// #endregion

// #region // 变量
const cityId = ref(JSON.parse(localStorage.getItem("cityId")).id);
const cityName = ref(JSON.parse(localStorage.getItem("cityId")).name);
const cinemas = ref(null); // 影院列表
const curCinemas = ref(null); // 筛选后的影院数组
const hidden = ref(false);
const loading = ref(false);
// #endregion

// #region // 函数
const getCinemaList = async () => {
  try {
    loading.value = true;
    const res = await getInterface({ cityId: cityId.value, ticketFlag: 1 }, "cinema.list");
    // console.log(res.data.data.cinemas);
    cinemas.value = res.data.data.cinemas;
    loading.value = false;
  } catch (error) {
    loading.value = false;
    // console.log(error);
  }
};
// #endregion

// #region // 生命周期和vue函数
// 进页面调用一次拿到数据
getCinemaList();
// console.log(route.path);
// #endregion
</script>

<template>
  <div class="cinemas_view">
    <div ref="header" class="header">
      <span @click="$router.push({ name: 'city' })">
        {{ cityName }}
        <i>&#8964;</i>
      </span>
      影院
      <em>&telrec;</em>
    </div>

    <div class="filter_cinemas">
      <filter-cinemas
        v-model:hidden="hidden"
        :cinemas
        v-model:curCinemas="curCinemas"
      ></filter-cinemas>
    </div>

    <cinema-list :curCinemas></cinema-list>

    <Loading2 :loading></Loading2>
  </div>
</template>

<style lang="scss" scoped>
.cinemas_view {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
  padding-top: 0.94rem;
}

.header {
  position: fixed;
  top: 0rem;
  height: 0.44rem;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 0.01rem solid #f4f4f4;
  z-index: 11;
  text-align: center;
  line-height: 0.43rem;
  font-size: 0.17rem;
  color: var(--cl-blk);
  span {
    position: absolute;
    left: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.12rem;
    i {
      position: absolute;
      top: -0.03rem;
      right: -0.1rem;
      transform: scale(1.4, 0.8);
    }
  }
  em {
    position: absolute;
    right: 0.15rem;
    transform: rotateY(180deg);
    font-size: 0.34rem;
    color: #666;
    top: -0.05rem;
  }
}

.filter_cinemas {
  position: fixed;
  width: 100%;
  top: 0.44rem;
  height: 0.5rem;
  z-index: 9;
}
</style>
